<template>
  <van-tree-select
    :items="items"
    :main-active-index="mainActiveIndex"
    :active-id="activeId"
    @navclick="onNavClick"
    @itemclick="onItemClick"
    class="tree-box"
  />
</template>

<script>
  import province from "../../data/province"

  export default {
    data() {
      return {
        items: province,
        mainActiveIndex: 0,//左侧高亮元素的index
        activeId: 1,//被选中元素的id
      };
    },
    methods: {
      onNavClick(index) {//左侧导航点击时，触发的事件
        this.mainActiveIndex = index;
      },
      onItemClick(data) {//右侧选择项被点击时，会触发的事件
        this.activeId = data.id;
        setTimeout(() => {
          this.$router.push({path: "/company", query: {"city": data.text}});
        }, 30);
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .tree-box
    width: 100%;
    height: 100% !important;
</style>
